/*------------------butterbar.scss-----------------------*/
.butterbar{
    position: relative;
    margin-bottom: -$butterbar-height;
    height: $butterbar-height;
    .bar{
        position: absolute;
        height: 0;
        width: 100%;
        text-indent: -9999px;
        background-color: $brand-info;
        &:before{
            content: "";
            height: $butterbar-height;
            position: absolute;
            left: 50%;
            right: 50%;
            background-color: inherit;
        }
    }
}
.butterbar.active{
    -webkit-animation: changebar $butterbar-time*3 infinite $butterbar-time;
    -moz-animation: changebar $butterbar-time*3 infinite $butterbar-time;
    animation: changebar $butterbar-time*3 infinite $butterbar-time;
    .bar{
        -webkit-animation: changebar $butterbar-time*3 infinite;
        -moz-animation: changebar $butterbar-time*3 infinite;
        animation: changebar $butterbar-time*3 infinite;
        &:before{
            -webkit-animation: movingbar $butterbar-time infinite;
            -moz-animation: movingbar $butterbar-time infinite;
            animation: movingbar $butterbar-time infinite;
        }
    }
}

/* Moving bar */
@-webkit-keyframes movingbar{
    0%    { left:50%; right:50% }
    99.9% { left:0%; right:0% }
    100%  { left:50%; right:50%}
}

@-moz-keyframes movingbar{
    0%    { left:50%; right:50% }
    99.9% { left:0%; right:0% }
    100%  { left:50%; right:50%}
}

@keyframes movingbar{
    0%    { left:50%; right:50% }
    99.9% { left:0%; right:0% }
    100%  { left:50%; right:50%}
}

/* change bar */
@-webkit-keyframes changebar{
    0%      { background-color: $brand-info }
    33.3%   { background-color: $brand-info }
    33.33%  { background-color: $brand-warning }
    66.6%   { background-color: $brand-warning }
    66.66%  { background-color: $brand-primary }
    99.9%    { background-color: $brand-primary }
}

@-moz-keyframes changebar{
    0%      { background-color: $brand-info }
    33.3%   { background-color: $brand-info }
    33.33%  { background-color: $brand-warning }
    66.6%   { background-color: $brand-warning }
    66.66%  { background-color: $brand-primary }
    99.9%    { background-color: $brand-primary }
}

@keyframes changebar{
    0%      { background-color: $brand-info }
    33.3%   { background-color: $brand-info }
    33.33%  { background-color: $brand-warning }
    66.6%   { background-color: $brand-warning }
    66.66%  { background-color: $brand-primary }
    99.9%    { background-color: $brand-primary }
}
/*------------------app.butterbar.less end-----------------------*/
